<template>
  <CommonQueryLayout class="atlas-control">
    <template #top>
      <QueryForm
        :form="queryFormBind"
        :form-item-list="queryFormItems"
        :loading="getAtlasLoading"
        @query="getAtlasList()"
      ></QueryForm>
    </template>
    <template #default>
      <CommonTopControl title-text="图集列表">
        <a-button type="primary" @click="openDialog('add')">
          <template #icon>
            <plus-square-outlined />
          </template>
          添加图集
        </a-button>
      </CommonTopControl>
      <AtlasList
        :data-source="atlasListState.listData"
        :loading="getAtlasLoading"
      >
        <template #actions="{ item }">
          <Simbtn
            text="编辑图集"
            icon="form-outlined"
            type="primary"
            size="small"
            @click="openDialog('edit', item)"
          />
          <Simbtn
            text="添加素材"
            icon="file-add-outlined"
            type="primary"
            size="small"
            :loading="queryMatLoading"
            @click="openSMatDia(item.id)"
          />
          <Simbtn
            text="查看素材"
            icon="search-outlined"
            size="small"
            @click="openDrawer(item)"
            :loading="fetchMaterialListLoading"
          />
        </template>
      </AtlasList>
      <div class="atlas-control__page-wrapper">
        <a-pagination
          show-size-changer
          show-quick-jumper
          :show-total="formatTotalPageText"
          v-model:current="pageInfo.current"
          v-model:pageSize="pageInfo.pageSize"
          :total="pageInfo.total"
          @change="pageChange"
          @showSizeChange="pageSizeChange"
        />
      </div>
    </template>
  </CommonQueryLayout>
  <ModifyAtlasDialog
    :title="dialogState.title"
    v-model:visible="dialogState.visible"
    okText="确定"
    cancelText="取消"
    :confirm-loading="modifyAtlasItemLoading || addAtlasItemLoading"
    @ok="handleOk"
    @cancel="cancelDialog"
    :form-state="dialogState.formState"
  />
  <SelectMatDialog
    v-model:visible="SMatDiavisiable"
    :mat-list="matList"
    :page-info="SMatDiaPageInfo"
    @get-mat-list="searchMatData"
    @enter="enterSelectMatDia"
    :query-mat-loading="queryMatLoading"
  />
  <a-drawer
    :title="currentAtlasItem?.name || '图集图片列表'"
    :width="1500"
    placement="right"
    v-model:visible="drawerVisiable"
  >
    <MaterialList
      :data-source="currentAtlasMaterialList"
      :loading="fetchMaterialListLoading"
    >
      <template #actions="{ item }">
        <a-popconfirm
          title="确定将此素材的预览图设置为当前图集的封面吗？"
          ok-text="确认"
          cancel-text="取消"
          @confirm="setAtlasImgByMaterial(item)"
        >
          <a-button
            size="small"
            type="primary"
            :loading="modifyAtlasItemLoading"
          >
            <template #icon>
              <alert-outlined />
            </template>
            设置为图集封面
          </a-button>
        </a-popconfirm>
        <a-popconfirm
          title="确定删除这张素材吗？"
          ok-text="确认"
          cancel-text="取消"
          @confirm="deleteMaterialInAtlas(item)"
        >
          <a-button
            size="small"
            type="primary"
            danger
            :loading="removeMaterialAtlasLoading"
          >
            <template #icon>
              <delete-outlined />
            </template>
            删除
          </a-button>
        </a-popconfirm>
      </template>
    </MaterialList>
    <div class="atlas-control__page-wrapper">
      <a-pagination
        show-size-changer
        show-quick-jumper
        :show-total="formatTotalPageText"
        v-model:current="currentAtlasMaterialPageInfo.current"
        v-model:pageSize="currentAtlasMaterialPageInfo.pageSize"
        :total="currentAtlasMaterialPageInfo.total"
        @change="currentAtlasMaterialPageChange"
        @showSizeChange="currentAtlasMaterialPageSizeChange"
      />
    </div>
  </a-drawer>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

import useSearchAtlas from './hooks/useSearchAtlas'
import useModifyAtlas from './hooks/useModifyAtlas'
import useSearchAtlasMaterialList from './hooks/useSearchAtlasMaterialList'
import useOperateAtlasMaterialList from './hooks/useOperateAtlasMaterialList'
import useSelectMatDialog from '@/components/Dialog/SelectMatDialog/hooks/useSelectMatDialog'

import { QueryForm } from '@/components/Form'
import { CommonTopControl } from '@/components/TopControl'
import { MaterialList, AtlasList } from '@/components/ItemList'
import CommonQueryLayout from '@/layout/CommonQueryLayout.vue'
import ModifyAtlasDialog from './components/ModifyAtlasDialog.vue'
import { SelectMatDialog } from '@/components/Dialog'
import { Simbtn } from '@/components/Button'
import { batchAddMaterial } from '@/api/premium/content/atlas'
import { BatchAddMaterialReq } from '@/api/premium/content/model/atlasModel'
import { message } from 'ant-design-vue'

// 搜索图集相关逻辑
const {
  atlasListState,
  pageInfo,
  getAtlasList,
  getAtlasLoading,
  queryFormBind,
  queryFormItems,
  pageChange,
  pageSizeChange,
  formatTotalPageText,
} = useSearchAtlas()

const {
  SMatDiavisiable,
  openSMatDia,
  searchMatData,
  queryMatLoading,
  matList,
  SMatDiaPageInfo,
  currentTemp,
} = useSelectMatDialog()

// 修改图集相关逻辑
const {
  dialogState,
  modifyAtlasItemLoading,
  handleOk,
  cancelDialog,
  openDialog,
  addAtlasItemLoading,
} = useModifyAtlas(getAtlasList)

// 查看指定图集列表逻辑
const {
  drawerVisiable,
  openDrawer,
  currentAtlasItem,
  currentAtlasMaterialList,
  fetchMaterialListLoading,
  currentAtlasMaterialPageInfo,
  currentAtlasMaterialPageChange,
  currentAtlasMaterialPageSizeChange,
  getCurrentAtlasMaterialList,
} = useSearchAtlasMaterialList()

// 操作指定图集的列表逻辑
const {
  deleteMaterialInAtlas,
  removeMaterialAtlasLoading,
  setAtlasImgByMaterial,
} = useOperateAtlasMaterialList(
  getAtlasList,
  getCurrentAtlasMaterialList,
  currentAtlasItem
)

/**
 * 确认选择素材框
 *
 * @param materialIds 选择的素材id列表
 * @param materialItems 选择的素材项完整信息列表
 */
const enterSelectMatDia = async (materialIds: string[]) => {
  const atlasId = currentTemp.value as string
  if (atlasId) {
    const reqData: BatchAddMaterialReq = {
      baseId: atlasId,
      relationIds: materialIds,
    }
    await batchAddMaterial(reqData)
    message.success('添加成功！')
  }
  SMatDiavisiable.value = false
  await getAtlasList()
}

onMounted(async () => {
  await getAtlasList()
})
</script>

<style lang="scss" scoped>
@include b(atlas-control) {
  @include e(page-wrapper) {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
